<template>
  <div class="containter">
    <div class="step">
      <ol class="titt">
        <el-badge
          :value="item.num"
          :max="99"
          :hidden="item.num == 0 || item.num == 'a'"
          class="item"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-button
            class="button"
            size="mini"
            :class="activeIndex == index?'cur':''"
            :disabled="item.num == 0"
            @click="goAssignBlock('panelRef'+ index,100,index)"
          >{{item.text}}</el-button>
        </el-badge>
      </ol>
    </div>
    <!-- <div class="switch" v-has="'isTm'">
      <span>金额是否脱敏：</span>
      <el-switch v-model="isTm" active-text="ON" inactive-text="OFF" @change="tmChange"></el-switch>
    </div> -->
    <div
      ref="panelRef0"
      class="basicInfo basicInfo1"
    >
      <p class="title">发票分析 </p>
      <div
        id="invoiceInfo"
        v-loading="loading"
      ></div>
      <div class="invoiceInfoSelect">
        <el-button
          class="button"
          :class="activeButton == '发票金额'?'cur':''"
          @click="invoiceInfoSelect('发票金额')"
        >发票金额</el-button>
        <el-button
          class="button"
          :class="activeButton == '发票数量'?'cur':''"
          @click="invoiceInfoSelect('发票数量')"
        >发票数量</el-button>
        <el-button
          class="button"
          :class="activeButton == '客户数量'?'cur':''"
          @click="invoiceInfoSelect('客户数量')"
        >客户数量</el-button>
        <el-button
          class="button"
          :class="activeButton == '供应商数量'?'cur':''"
          @click="invoiceInfoSelect('供应商数量')"
        >供应商数量</el-button>
      </div>
    </div>
    <div
      ref="panelRef1"
      class="basicInfo basicInfo2"
    >
      <div class="title">
        <span>发票概览 </span>
        <div>
          <span>查询年份：</span>
          <el-select
            v-model="selectYear"
            @change="invoiceDateChange"
            placeholder="请选择"
          >
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <table
        class="table"
        v-loading="loading1"
      >
        <tr>
          <th>年份</th>
          <td>{{selectYear}}年</td>
          <th>销售收入-开票金额</th>
          <td v-show="isTm">{{deseHandler(fpglList.inj)}}元</td>
          <td v-show="!isTm">{{fpglList.inj}}元</td>
          <th>销售收入-税额</th>
          <td v-show="isTm">{{deseHandler(fpglList.ins)}}元</td>
          <td v-show="!isTm">{{fpglList.ins}}元</td>
        </tr>
        <tr>
          <th>客户数量</th>
          <td>{{fpglList.GMFMC}}个</td>
          <th>采购支出-开票金额</th>
          <td v-show="isTm">{{deseHandler(fpglList.outj)}}元</td>
          <td v-show="!isTm">{{fpglList.outj}}元</td>
          <th>采购支出-税额</th>
          <td v-show="isTm">{{deseHandler(fpglList.outs)}}元</td>
          <td v-show="!isTm">{{fpglList.outs}}元</td>
        </tr>
        <tr>
          <th>供应商数量</th>
          <td>{{fpglList.XHFSBH}}个</td>
          <th></th>
          <td></td>
          <th></th>
          <td></td>
        </tr>
      </table>
    </div>
    <div
      ref="panelRef2"
      class="basicInfo basicInfo3"
    >
      <p class="title">销项发票统计 </p>
      <el-table
        :data="xxfptjList"
        style="width: 100%"
        v-loading="loading2"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          prop="datime"
          label="统计月份"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZC"
          label="正常发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.ZC)}}</span>
            <span v-show="!isTm">{{scope.row.ZC}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ZCSUM"
          label="正常发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZF"
          label="作废发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.ZF)}}</span>
            <span v-show="!isTm">{{scope.row.ZF}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ZFSUM"
          label="作废发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CH"
          label="冲红发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.CH)}}</span>
            <span v-show="!isTm">{{scope.row.CH}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="CHSUM"
          label="冲红发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZYFP"
          label="专用发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.ZYFP)}}</span>
            <span v-show="!isTm">{{scope.row.ZYFP}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ZYFPSUM"
          label="专用发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="PTFP"
          label="普通发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.PTFP)}}</span>
            <span v-show="!isTm">{{scope.row.PTFP}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="PTFPSUM"
          label="普通发票份数"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef3"
      class="basicInfo basicInfo3"
    >
      <p class="title">销项发票税率统计 </p>
      <el-table
        :data="taxOutRateList"
        style="width: 100%"
        v-loading="loading10"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          prop="year"
          label="统计月份"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="0%税率"
          label="0%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['0%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['0%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="3%税率"
          label="3%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['3%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['3%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="5%税率"
          label="5%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['5%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['5%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="6%税率"
          label="6%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['6%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['6%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="9%税率"
          label="9%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['9%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['9%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="10%税率"
          label="10%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['10%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['10%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="11%税率"
          label="11%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['11%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['11%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="13%税率"
          label="13%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['13%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['13%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="16%税率"
          label="16%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['16%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['16%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="17%税率"
          label="17%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['17%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['17%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="other"
          label="其他"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['other'])}}</span>
            <span v-show="!isTm">{{scope.row['other']}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef4"
      class="basicInfo basicInfo4"
    >
      <p class="title"><span>销项发票</span><span
          @click="checkMorexxfp"
          class="glqy"
        >查看更多信息>></span></p>
      <el-table
        :data="xxfpList"
        style="width: 100%"
        v-loading="loading3"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPDM"
          label="发票代码"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPHM"
          label="发票号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="KPRQ"
          label="开票日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPLX"
          label="发票类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="GMFMC"
          label="购货方发票抬头"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="GMFSBH"
          label="购货方纳税人识别号"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="HJJE"
          label="金额合计（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
            <span v-show="!isTm">{{scope.row.HJJE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="HJSE"
          label="税额合计（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJSE)}}</span>
            <span v-show="!isTm">{{scope.row.HJSE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="JSHJ"
          label="价税合计（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JSHJ)}}</span>
            <span v-show="!isTm">{{scope.row.JSHJ}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="FPZT"
          label="发票状态"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="查看更多销项发票"
        :visible.sync="dialogVisible1"
        width="80%"
        custom-class="dialog"
      >
        <div class="morexxfp">
          <div>
            <span>查询日期：</span>
            <el-date-picker
              v-model="morexxfp.date"
              type="daterange"
              format='yyyy-MM-dd'
              value-format='yyyy-MM-dd'
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div>
            <span>发票类型：</span>
            <el-select
              v-model="morexxfp.type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in morexxfpTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <span>发票状态：</span>
            <el-select
              v-model="morexxfp.status"
              placeholder="请选择"
            >
              <el-option
                v-for="item in morexxfpStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-button
            type="primary"
            @click="searchXxfp"
          >查询</el-button>
          <el-button @click="resetXxfp">重置</el-button>
        </div>
        <el-table
          :data="xxfpMoreList"
          style="width: 100%"
          max-height="500"
          :header-cell-style="{background:'#f2f9fe'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{(pagination1.page - 1) * 10 + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="FPDM"
            label="发票代码"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="FPHM"
            label="发票号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="KPRQ"
            label="开票日期"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="FPLX"
            label="发票类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="GMFMC"
            label="购货方发票抬头"
            width="300"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="GMFSBH"
            label="购货方纳税人识别号"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="HJJE"
            label="金额合计（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
              <span v-show="!isTm">{{scope.row.HJJE}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="HJSE"
            label="税额合计（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.HJSE)}}</span>
              <span v-show="!isTm">{{scope.row.HJSE}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="JSHJ"
            label="价税合计（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.JSHJ)}}</span>
              <span v-show="!isTm">{{scope.row.JSHJ}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="FPZT"
            label="发票状态"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination"><el-pagination
            layout="prev, pager, next"
            background
            :current-page.sync='pagination1.page'
            :total="pagination1.total"
            @current-change='xxfpChange'
          ></el-pagination></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef5"
      class="basicInfo basicInfo5"
    >
      <p class="title"><span>前十大主营商品统计</span><span
          @click="checkShopAnalize"
          class="glqy"
        >查看分析>></span></p>
      <el-table
        :data="topTenShopList"
        style="width: 100%"
        v-loading='loading4'
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SPMC"
          label="商品名称"
          width="300"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="JETOTAL"
          label="销售金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JETOTAL)}}</span>
            <span v-show="!isTm">{{scope.row.JETOTAL}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ratio"
          label="占销售总额百分比"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="商品数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="GMFMC"
          label="主要客户"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="JESUM"
          label="主要客户采购商品金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JESUM)}}</span>
            <span v-show="!isTm">{{scope.row.JESUM}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="前十大主营商品分析"
        :visible.sync="dialogVisible2"
        width="70%"
        custom-class="dialog"
      >
        <div id="topTenShop"></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef6"
      class="basicInfo basicInfo6"
    >
      <p class="title"><span>销售商品统计</span><span
          @click="checkMoreShop"
          class="glqy"
        >查看更多信息>></span></p>
      <el-table
        :data="sellShopList"
        style="width: 100%"
        v-loading='loading5'
        max-height="240"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SPMC"
          label="商品名称"
          width="300"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="开票量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="JESUM"
          label="销售总金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JESUM)}}</span>
            <span v-show="!isTm">{{scope.row.JESUM}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ratio"
          label="销售总金额占比"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="查看更多销售商品"
        :visible.sync="dialogVisible3"
        width="60%"
        custom-class="dialog"
      >
        <el-table
          :data="sellMoreShopList"
          style="width: 100%"
          :header-cell-style="{background:'#f2f9fe'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{(pagination2.page - 1) * 10 + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="SPMC"
            label="商品名称"
            width="300"
            :show-overflow-tooltip="true"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="count"
            label="开票量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="JESUM"
            label="销售总金额（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.JESUM)}}</span>
              <span v-show="!isTm">{{scope.row.JESUM}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ratio"
            label="销售总金额占比"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination"><el-pagination
            layout="prev, pager, next"
            background
            :current-page.sync='pagination2.page'
            :total="pagination2.total"
            @current-change='sellShop'
          ></el-pagination></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef7"
      class="basicInfo basicInfo5"
    >
      <p class="title"><span>前十大客户统计</span><span
          @click="checkClientAnalize"
          class="glqy"
        >查看分析>></span></p>
      <el-table
        :data="topTenClientList"
        style="width: 100%"
        v-loading='loading6'
        max-height="520"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="GMFMC"
          label="客户名称"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="HJJE"
          label="交易总金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
            <span v-show="!isTm">{{scope.row.HJJE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="FPHM"
          label="开票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ratio"
          label="交易总额占比"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="KPRQ"
          label="最后成交日期"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="前十大客户分析"
        :visible.sync="dialogVisible4"
        width="70%"
        custom-class="dialog"
      >
        <div id="topTenClient"></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef8"
      class="basicInfo basicInfo6"
    >
      <p class="title"><span>客户统计</span><span
          @click="checkMoreClient"
          class="glqy"
        >查看更多信息>></span></p>
      <el-table
        :data="clientList"
        style="width: 100%"
        v-loading="loading7"
        max-height="240"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="GMFSBH"
          label="购货方识别号"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="GMFMC"
          label="购货方名称"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPSUM"
          label="开票量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="HJJE"
          label="交易总金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
            <span v-show="!isTm">{{scope.row.HJJE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ratio"
          label="交易总额占比"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="查看更多客户"
        :visible.sync="dialogVisible5"
        width="60%"
        custom-class="dialog"
      >
        <el-table
          :data="clientMoreList"
          style="width: 100%"
          max-height="500"
          :header-cell-style="{background:'#f2f9fe'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{(pagination3.page - 1) * 10 + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="GMFSBH"
            label="购货方识别号"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="GMFMC"
            label="购货方名称"
            width="300"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="FPSUM"
            label="开票量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="HJJE"
            label="交易总金额（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
              <span v-show="!isTm">{{scope.row.HJJE}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ratio"
            label="交易总额占比"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination"><el-pagination
            layout="prev, pager, next"
            background
            :current-page.sync='pagination3.page'
            :total="pagination3.total"
            @current-change='client'
          ></el-pagination></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef9"
      class="basicInfo basicInfo3"
    >
      <p class="title">进项发票统计 </p>
      <el-table
        :data="jxfptjList"
        style="width: 100%"
        v-loading="loading8"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          prop="datime"
          label="统计月份"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZC"
          label="正常发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.ZC)}}</span>
            <span v-show="!isTm">{{scope.row.ZC}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ZCSUM"
          label="正常发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZF"
          label="作废发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.ZF)}}</span>
            <span v-show="!isTm">{{scope.row.ZF}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ZFSUM"
          label="作废发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CH"
          label="冲红发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.CH)}}</span>
            <span v-show="!isTm">{{scope.row.CH}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="CHSUM"
          label="冲红发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZYFP"
          label="专用发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.ZYFP)}}</span>
            <span v-show="!isTm">{{scope.row.ZYFP}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ZYFPSUM"
          label="专用发票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="PTFP"
          label="普通发票金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.PTFP)}}</span>
            <span v-show="!isTm">{{scope.row.PTFP}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="PTFPSUM"
          label="普通发票份数"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef10"
      class="basicInfo basicInfo3"
    >
      <p class="title">进项发票税率统计 </p>
      <el-table
        :data="taxInRateList"
        style="width: 100%"
        v-loading="loading9"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          prop="year"
          label="统计月份"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="0%税率"
          label="0%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['0%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['0%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="3%税率"
          label="3%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['3%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['3%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="5%税率"
          label="5%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['5%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['5%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="6%税率"
          label="6%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['6%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['6%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="9%税率"
          label="9%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['9%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['9%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="10%税率"
          label="10%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['10%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['10%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="11%税率"
          label="11%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['11%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['11%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="13%税率"
          label="13%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['13%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['13%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="16%税率"
          label="16%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['16%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['16%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="17%税率"
          label="17%税率"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['17%税率'])}}</span>
            <span v-show="!isTm">{{scope.row['17%税率']}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="other"
          label="其他"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row['other'])}}</span>
            <span v-show="!isTm">{{scope.row['other']}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef11"
      class="basicInfo basicInfo4"
    >
      <p class="title"><span>进项发票</span><span
          @click="checkMorejxfp"
          class="glqy"
        >查看更多信息>></span></p>
      <el-table
        :data="jxfpList"
        style="width: 100%"
        v-loading="loading11"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPDM"
          label="发票代码"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPHM"
          label="发票号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="KPRQ"
          label="开票日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPLX"
          label="发票类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="XHFMC"
          label="购货方发票抬头"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="XHFSBH"
          label="购货方纳税人识别号"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="HJJE"
          label="金额合计（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
            <span v-show="!isTm">{{scope.row.HJJE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="HJSE"
          label="税额合计（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJSE)}}</span>
            <span v-show="!isTm">{{scope.row.HJSE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="JSHJ"
          label="价税合计（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JSHJ)}}</span>
            <span v-show="!isTm">{{scope.row.JSHJ}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="FPZT"
          label="发票状态"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="查看更多进项发票"
        :visible.sync="dialogVisible6"
        width="80%"
        custom-class="dialog"
      >
        <div class="morexxfp">
          <div>
            <span>查询日期：</span>
            <el-date-picker
              v-model="morejxfp.date"
              type="daterange"
              format='yyyy-MM-dd'
              value-format='yyyy-MM-dd'
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div>
            <span>发票类型：</span>
            <el-select
              v-model="morejxfp.type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in morexxfpTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <span>发票状态：</span>
            <el-select
              v-model="morejxfp.status"
              placeholder="请选择"
            >
              <el-option
                v-for="item in morexxfpStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-button
            type="primary"
            @click="searchJxfp"
          >查询</el-button>
          <el-button @click="resetJxfp">重置</el-button>
        </div>
        <el-table
          :data="jxfpMoreData"
          style="width: 100%"
          max-height="500"
          :header-cell-style="{background:'#f2f9fe'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{(pagination4.page - 1) * 10 + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="FPDM"
            label="发票代码"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="FPHM"
            label="发票号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="KPRQ"
            label="开票日期"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="FPLX"
            label="发票类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="XHFMC"
            label="购货方发票抬头"
            width="300"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="XHFSBH"
            label="购货方纳税人识别号"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="HJJE"
            label="金额合计（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
              <span v-show="!isTm">{{scope.row.HJJE}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="HJSE"
            label="税额合计（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.HJSE)}}</span>
              <span v-show="!isTm">{{scope.row.HJSE}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="JSHJ"
            label="价税合计（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.JSHJ)}}</span>
              <span v-show="!isTm">{{scope.row.JSHJ}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="FPZT"
            label="发票状态"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination"><el-pagination
            layout="prev, pager, next"
            background
            :current-page.sync='pagination4.page'
            :total="pagination4.total"
            @current-change='jxfpChange'
          ></el-pagination></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef12"
      class="basicInfo basicInfo5"
    >
      <p class="title"><span>前十大采购商品统计</span><span
          @click="checkPurchaseProductsAnalize"
          class="glqy"
        >查看分析>></span></p>
      <el-table
        :data="topTenPurchaseProductsList"
        style="width: 100%"
        v-loading="loading12"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SPMC"
          label="商品名称"
          width="300"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="JESUM"
          label="采购金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JESUM)}}</span>
            <span v-show="!isTm">{{scope.row.JESUM}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ratio"
          label="占采购总额百分比"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="商品数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="XHFMC"
          label="主要供应商"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="JETOTAL"
          label="主要供应商销售此商品金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JETOTAL)}}</span>
            <span v-show="!isTm">{{scope.row.JETOTAL}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="前十大采购商品分析"
        :visible.sync="dialogVisible7"
        width="70%"
        custom-class="dialog"
      >
        <div id="topTenPurchaseProducts"></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef13"
      class="basicInfo basicInfo6"
    >
      <p class="title"><span>采购商品统计</span><span
          @click="checkMorePurchaseProducts"
          class="glqy"
        >查看更多信息>></span></p>
      <el-table
        :data="purchaseProductsList"
        style="width: 100%"
        v-loading="loading13"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SPMC"
          label="商品名称"
          width="320"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="count"
          label="开票量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="JESUM"
          label="采购总金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.JESUM)}}</span>
            <span v-show="!isTm">{{scope.row.JESUM}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ratio"
          label="采购总金额占比"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="查看更多采购商品"
        :visible.sync="dialogVisible8"
        width="60%"
        custom-class="dialog"
      >
        <el-table
          :data="purchaseProductsMoreList"
          style="width: 100%"
          max-height="500"
          :header-cell-style="{background:'#f2f9fe'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{(pagination5.page - 1) * 10 + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="SPMC"
            label="商品名称"
            width="320"
            :show-overflow-tooltip="true"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="count"
            label="开票量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="JESUM"
            label="采购总金额（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.JESUM)}}</span>
              <span v-show="!isTm">{{scope.row.JESUM}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ratio"
            label="采购总金额占比"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination"><el-pagination
            layout="prev, pager, next"
            background
            :current-page.sync='pagination5.page'
            :total="pagination5.total"
            @current-change='purchaseProducts'
          ></el-pagination></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef14"
      class="basicInfo basicInfo5"
    >
      <p class="title"><span>前十大供应商统计</span><span
          @click="checkSupplierAnalize"
          class="glqy"
        >查看分析>></span></p>
      <el-table
        :data="topTenSupplierList"
        style="width: 100%"
        v-loading="loading14"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="XHFMC"
          label="供应商名称"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="HJJE"
          label="交易总金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
            <span v-show="!isTm">{{scope.row.HJJE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="FPHM"
          label="开票份数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ratio"
          label="交易总额占比"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="KPRQ"
          label="最后交易日期"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="前十大供应商分析"
        :visible.sync="dialogVisible9"
        width="70%"
        custom-class="dialog"
      >
        <div id="topTenSupplier"></div>
      </el-dialog>
    </div>
    <div
      ref="panelRef15"
      class="basicInfo basicInfo6"
    >
      <p class="title"><span>供应商统计</span><span
          @click="checkMoreSupplier"
          class="glqy"
        >查看更多信息>></span></p>
      <el-table
        :data="supplierList"
        style="width: 100%"
        v-loading="loading15"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="XHFSBH"
          label="供应商识别号"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="XHFMC"
          label="供应商名称"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="FPSUM"
          label="开票量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="HJJE"
          label="交易总金额（元）"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
            <span v-show="!isTm">{{scope.row.HJJE}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ratio"
          label="交易总金额占比"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        title="查看更多供应商"
        :visible.sync="dialogVisible10"
        width="60%"
        custom-class="dialog"
      >
        <el-table
          :data="supplierMoreList"
          style="width: 100%"
          max-height="500"
          :header-cell-style="{background:'#f2f9fe'}"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{(pagination6.page - 1) * 10 + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="XHFSBH"
            label="供应商识别号"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="XHFMC"
            label="供应商名称"
            width="300"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="FPSUM"
            label="开票量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="HJJE"
            label="交易总金额（元）"
            align="center"
          >
            <template slot-scope="scope">
              <span v-show="isTm">{{deseHandler(scope.row.HJJE)}}</span>
              <span v-show="!isTm">{{scope.row.HJJE}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ratio"
            label="交易总金额占比"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="pagination"><el-pagination
            layout="prev, pager, next"
            background
            :current-page.sync='pagination6.page'
            :total="pagination6.total"
            @current-change='supplier'
          ></el-pagination></div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getField } from '@/api/user.js'
import {
  getYear,
  getOutBillByYear,
  getInBillByYear,
  getOutBillCount,
  getInBillCount,
  getKeHuCount,
  getGysCount,
  billSurvey,
  outPutBillTj,
  outPutBillTax,
  outPutBill,
  tenMainProd,
  saleProd,
  tenKh,
  keHuTongJi,
  InBillTongJi,
  InBillTax,
  InBill,
  tenPurchaseProd,
  purchaseProdTj,
  tenGys,
  gysTongJi,
} from '@/api/portay'
export default {
  props: ['comInfo', 'isTm'],
  data() {
    return {
      //isTm: true,
      activeIndex: 'a',
      activeButton: '发票金额',
      loading: false,
      selectYear: '',
      timeOptions: [],
      pickerOptions: {
        disabledDate(date) {
          //这里设置今天以后的不可选
          return date.getTime() > Date.now()
        },
      },
      taxOptions: [
        '0%税率',
        '3%税率',
        '5%税率',
        '6%税率',
        '9%税率',
        '10%税率',
        '11%税率',
        '13%税率',
        '16%税率',
        '17%税率',
        'other',
      ],
      list: [
        { text: '发票分析', num: 'a', disabled: false },
        { text: '发票概览', num: 'a', disabled: false },
        { text: '销项发票统计', disabled: false },
        { text: '销项发票税率统计', disabled: false },
        { text: '销项发票', disabled: false },
        { text: '前十大主营商品统计', disabled: false },
        { text: '销售商品统计', disabled: false },
        { text: '前十大客户统计', disabled: false },
        { text: '客户统计', disabled: false },
        { text: '进项发票统计', disabled: false },
        { text: '进项发票税率统计', disabled: false },
        { text: '进项发票', disabled: false },
        { text: '前十大采购商品统计', disabled: false },
        { text: '采购商品统计', disabled: false },
        { text: '前十大供应商统计', disabled: false },
        { text: '供应商统计', disabled: false },
      ],
      fpglList: {},
      xxfptjList: [],
      taxOutRateList: [],
      xxfpList: [],
      morexxfp: {
        date: [],
        type: '',
        status: '',
      },
      morejxfp: {
        date: [],
        type: '',
        status: '',
      },
      morexxfpTypeOptions: [],
      morexxfpStatusOptions: [],
      xxfpMoreList: [],
      pagination1: { page: 1, total: 0 },
      topTenShopList: [],
      sellShopList: [],
      sellMoreShopList: [],
      pagination2: { page: 1, total: 0 },
      topTenClientList: [],
      clientList: [],
      clientMoreList: [],
      pagination3: { page: 1, total: 0 },
      jxfptjList: [],
      taxInRateList: [],
      jxfpList: [],
      jxfpMoreData: [],
      pagination4: { page: 1, total: 0 },
      topTenPurchaseProductsList: [],
      purchaseProductsList: [],
      purchaseProductsMoreList: [],
      pagination5: { page: 1, total: 0 },
      topTenSupplierList: [],
      supplierList: [],
      supplierMoreList: [],
      pagination6: { page: 1, total: 0 },
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      loading8: false,
      loading9: false,
      loading10: false,
      loading11: false,
      loading12: false,
      loading13: false,
      loading14: false,
      loading15: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      dialogVisible7: false,
      dialogVisible8: false,
      dialogVisible9: false,
      dialogVisible10: false,
    }
  },
  created() {
    let params1 = { page: 1, size: 100, code: 'FPLX' }
    getField(params1).then((res) => {
      if (res.status) {
        this.morexxfpTypeOptions = res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        })
      }
    })
    let params2 = { page: 1, size: 100, code: 'FPZT' }
    getField(params2).then((res) => {
      if (res.status) {
        this.morexxfpStatusOptions = res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        })
      }
    })
  },
  watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
          this.invoiceInfoSelect('发票金额')
          this.loading1 = true
          this.loading2 = true
          this.loading3 = true
          this.loading4 = true
          this.loading5 = true
          this.loading6 = true
          this.loading7 = true
          this.loading8 = true
          this.loading9 = true
          this.loading10 = true
          this.loading11 = true
          this.loading12 = true
          this.loading13 = true
          this.loading14 = true
          this.loading15 = true
          getYear({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
            this.timeOptions = res.data.map((item) => {
              return { label: item + '年', value: item }
            })
            this.selectYear = res.data[0]
            this.billSurvey()
            this.outPutBillTj()
            this.outPutBillTax()
            this.outPutBill()
            this.tenMainProd()
            this.saleProd()
            this.tenKh()
            this.keHuTongJi()
            this.InBillTongJi()
            this.InBillTax()
            this.InBill()
            this.tenPurchaseProd()
            this.purchaseProdTj()
            this.tenGys()
            this.gysTongJi()
          })
        }
      },
      deep: true,
      immediate: true,
    },
    isTm: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          let btn = this.activeButton
          this.invoiceInfoSelect(btn)
        }
      },
    },
  },
  mounted() {},
  methods: {
    //年份选择
    invoiceDateChange() {
      this.billSurvey()
      this.outPutBillTj()
      this.outPutBillTax()
      this.outPutBill()
      this.tenMainProd()
      this.saleProd()
      this.tenKh()
      this.keHuTongJi()
      this.InBillTongJi()
      this.InBillTax()
      this.InBill()
      this.tenPurchaseProd()
      this.purchaseProdTj()
      this.tenGys()
      this.gysTongJi()
    },
    //数组合并去重
    MergeArray(arr1, arr2) {
      var _arr = new Array()
      for (var i = 0; i < arr1.length; i++) {
        _arr.push(arr1[i])
      }
      for (var i = 0; i < arr2.length; i++) {
        var flag = true
        for (var j = 0; j < arr1.length; j++) {
          if (arr2[i] == arr1[j]) {
            flag = false
            break
          }
        }
        if (flag) {
          _arr.push(arr2[i])
        }
      }
      return _arr
    },
    //发票分析类型选择
    invoiceInfoSelect(val) {
      this.loading = true
      let legendData
      let XData
      let data
      if (val == '发票金额') {
        this.activeButton = '发票金额'
        legendData = ['进项金额', '销项金额']
        data = [
          {
            name: legendData[0],
            data: [],
            type: 'bar',
            barWidth: 50,
          },
          {
            name: legendData[1],
            data: [],
            type: 'bar',
            barWidth: 50,
          },
        ]
        getOutBillByYear({ TYSHXYDM: this.comInfo.shtyxydm }).then((res1) => {
          let result1 = res1.data.reverse()
          let XData1 = result1.map((item) => item.year)
          getInBillByYear({ TYSHXYDM: this.comInfo.shtyxydm }).then((res2) => {
            this.loading = false
            let result2 = res2.data.reverse()
            let XData2 = result2.map((item) => item.year)
            XData = this.MergeArray(XData1, XData2).sort()
            XData.forEach((element) => {
              let outBill = result1.filter((ite) => ite.year == element)
              if (outBill.length > 0) {
                data[1].data.push(outBill[0].total)
              } else {
                data[1].data.push(0)
              }
              let inBill = result2.filter((ite) => ite.year == element)
              if (inBill.length > 0) {
                data[0].data.push(inBill[0].total)
              } else {
                data[0].data.push(0)
              }
            })
            this.$nextTick(() => {
              this.invoiceAnalyse('元', legendData, XData, data)
            })
          })
        })
      } else if (val == '发票数量') {
        this.activeButton = '发票数量'
        legendData = ['进项数量', '销项数量']
        data = [
          {
            name: legendData[0],
            data: [],
            type: 'bar',
            barWidth: 50,
          },
          {
            name: legendData[1],
            data: [],
            type: 'bar',
            barWidth: 50,
          },
        ]
        getOutBillCount({ TYSHXYDM: this.comInfo.shtyxydm }).then((res1) => {
          let result1 = res1.data.reverse()
          let XData1 = result1.map((item) => item.year)
          getInBillCount({ TYSHXYDM: this.comInfo.shtyxydm }).then((res2) => {
            this.loading = false
            let result2 = res2.data.reverse()
            let XData2 = result2.map((item) => item.year)
            XData = this.MergeArray(XData1, XData2).sort()
            XData.forEach((element) => {
              let outBill = result1.filter((ite) => ite.year == element)
              if (outBill.length > 0) {
                data[1].data.push(outBill[0].count)
              } else {
                data[1].data.push(0)
              }
              let inBill = result2.filter((ite) => ite.year == element)
              if (inBill.length > 0) {
                data[0].data.push(inBill[0].count)
              } else {
                data[0].data.push(0)
              }
            })
            this.$nextTick(() => {
              this.invoiceAnalyse('份', legendData, XData, data)
            })
          })
        })
      } else if (val == '客户数量') {
        this.activeButton = '客户数量'
        legendData = ['客户数量']
        data = [
          {
            name: '客户数量',
            data: [],
            type: 'bar',
            barWidth: 50,
          },
        ]
        getKeHuCount({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
          this.loading = false
          let result = res.data
          XData = result.map((item) => item.year)
          data[0].data = result.map((item) => item.count)
          this.$nextTick(() => {
            this.invoiceAnalyse('个', legendData, XData, data)
          })
        })
      } else if (val == '供应商数量') {
        this.activeButton = '供应商数量'
        legendData = ['供应商数量']
        data = [
          {
            name: '供应商数量',
            data: [],
            type: 'bar',
            barWidth: 50,
          },
        ]
        getGysCount({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
          this.loading = false
          let result = res.data
          XData = result.map((item) => item.year)
          data[0].data = result.map((item) => item.count)
          this.$nextTick(() => {
            this.invoiceAnalyse('个', legendData, XData, data)
          })
        })
      }
    },
    //发票概况
    billSurvey() {
      this.loading1 = true
      billSurvey({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
      }).then((res) => {
        this.loading1 = false
        this.fpglList = res.data[0]
      })
    },
    //销项发票统计
    outPutBillTj() {
      this.loading2 = true
      let index = this.list.findIndex((item) => item.text == '销项发票统计')
      outPutBillTj({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
      }).then((res) => {
        this.loading2 = false
        this.xxfptjList = res.data
        this.list[index].num = res.data.length
      })
    },
    //销项发票税率统计
    outPutBillTax() {
      this.loading10 = true
      let ind = this.list.findIndex((item) => item.text == '销项发票税率统计')
      outPutBillTax({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
      }).then((res) => {
        this.list[ind].num = res.data.length
        this.loading10 = false
        this.taxOutRateList = []
        let yearList = []
        res.data.map((item) => {
          if (yearList.indexOf(item.year) == -1) {
            yearList.push(item.year)
          }
        })
        yearList.sort((a, b) => {
          let aTimeString = a.replace('.', '/')
          let bTimeString = b.replace('.', '/')
          let aTime = new Date(aTimeString).getTime()
          let bTime = new Date(bTimeString).getTime()
          return bTime - aTime
        })
        for (let i = 0; i < yearList.length; i++) {
          let index = this.taxOutRateList.findIndex(
            (tem) => tem.year == yearList[i]
          )
          if (index >= 0) {
            this.taxOptions.forEach((t) => {
              res.data.forEach((ite) => {
                if (ite.ratio == t && ite.year == yearList[i]) {
                  this.taxOutRateList[index][t] = ite.sum
                }
              })
            })
          } else {
            this.taxOutRateList.push({ year: yearList[i] })
            --i
          }
        }
      })
    },
    //销项发票
    outPutBill() {
      this.loading3 = true
      let startTime = this.selectYear + '-01-01'
      let endTime = this.selectYear + '-12-31'
      let index = this.list.findIndex((item) => item.text == '销项发票')
      outPutBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        startTime,
        endTime,
        pageNum: 1,
        pageSize: 3,
      }).then((res) => {
        this.loading3 = false
        this.xxfpList = res.data.records
        this.list[index].num = res.data.total
      })
    },
    //查看更多销项发票
    checkMorexxfp() {
      this.dialogVisible1 = true
      this.pagination1.page = 1
      let startTime = this.selectYear + '-01-01'
      let endTime = this.selectYear + '-12-31'
      this.morexxfp.date = [startTime, endTime]
      outPutBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        startTime,
        endTime,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.loading3 = false
        this.xxfpMoreList = res.data.records
        this.pagination1.total = Number(res.data.total)
      })
    },
    //查看更多销项发票--查询
    searchXxfp() {
      let { date, type, status } = this.morexxfp
      let startTime, endTime
      if (date.length > 0) {
        startTime = date[0]
        endTime = date[1]
      }
      this.pagination1.page = 1
      outPutBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: 1,
        pageSize: 10,
        startTime,
        endTime,
        fplx: type,
        fpzt: status,
      }).then((res) => {
        this.xxfpMoreList = res.data.records
        this.pagination1.total = Number(res.data.total)
      })
    },
    //查看更多销项发票--重置
    resetXxfp() {
      this.morexxfp = {
        date: [],
        type: '',
        status: '',
      }
      this.checkMorexxfp()
    },
    //销项发票分页
    xxfpChange(val) {
      this.pagination1.page = val
      outPutBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.xxfpMoreList = res.data.records
      })
    },
    //前十大主营商品
    tenMainProd() {
      this.loading4 = true
      let index = this.list.findIndex(
        (item) => item.text == '前十大主营商品统计'
      )
      tenMainProd({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
      }).then((res) => {
        this.loading4 = false
        this.topTenShopList = res.data
        this.list[index].num = res.data.length
      })
    },
    //前十大主营商品统计分析
    checkShopAnalize() {
      this.dialogVisible2 = true
      let legendData = []
      let data = []
      this.topTenShopList.forEach((item) => {
        let seriesData = {}
        legendData.push(item.SPMC)
        seriesData.name = item.SPMC
        seriesData.value = [item.JETOTAL, item.ratio, item.GMFMC, item.JESUM]
        data.push(seriesData)
      })

      this.$nextTick(() => {
        let chartDom = document.getElementById('topTenShop')
        let myChart1 = echarts.init(chartDom)
        let option
        let isTm = this.isTm
        let that = this
        option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              let val = params.data
              let data = val.value
              return `<p style="text-align:center;margin:0;font-weight:900;">${
                val.name
              }</p><hr/>销售金额（元）：${
                isTm ? that.deseHandler(data[0]) : data[0]
              }<br/>占销售总额百分比：${data[1]}<br/>主要客户：${
                data[2]
              }<br/>主要客户采购商品金额（元）：${
                isTm ? that.deseHandler(data[3]) : data[3]
              }`
            },
            backgroundColor: '#eeeeee',
          },
          legend: {
            orient: 'vertical',
            right: 'right',
            data: legendData,
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data,
            },
          ],
        }

        option && myChart1.setOption(option)
        window.addEventListener('resize', () => {
          myChart1.resize()
        })
      })
    },
    //销售商品统计
    saleProd() {
      this.loading5 = true
      let index = this.list.findIndex((item) => item.text == '销售商品统计')
      saleProd({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 3,
      }).then((res) => {
        this.loading5 = false
        this.sellShopList = res.data.records
        this.list[index].num = res.data.total
      })
    },
    //查看更多销售商品
    checkMoreShop() {
      this.dialogVisible3 = true
      this.pagination2.page = 1
      saleProd({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.sellMoreShopList = res.data.records
        this.pagination2.total = Number(res.data.total)
      })
    },
    //查看更多销售商品分页
    sellShop(val) {
      this.pagination2.page = val
      saleProd({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.sellMoreShopList = res.data.records
      })
    },
    //前十大客户
    tenKh() {
      this.loading6 = true
      let index = this.list.findIndex((item) => item.text == '前十大客户统计')
      tenKh({ TYSHXYDM: this.comInfo.shtyxydm, year: this.selectYear }).then(
        (res) => {
          this.loading6 = false
          this.topTenClientList = res.data
          this.list[index].num = res.data.length
        }
      )
    },
    //前十大客户统计分析
    checkClientAnalize() {
      this.dialogVisible4 = true
      let legendData = []
      let data = []
      this.topTenClientList.forEach((item) => {
        let seriesData = {}
        legendData.push(item.GMFMC)
        seriesData.name = item.GMFMC
        seriesData.value = [item.HJJE, item.ratio, item.KPRQ]
        data.push(seriesData)
      })
      this.$nextTick(() => {
        let chartDom = document.getElementById('topTenClient')
        let myChart2 = echarts.init(chartDom)
        let option
        let isTm = this.isTm
        let that = this
        option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              let val = params.data
              let data = val.value
              return `<p style="text-align:center;margin:0;font-weight:900;">${
                val.name
              }</p><hr/>交易总金额（元）：${
                isTm ? that.deseHandler(data[0]) : data[0]
              }<br/>交易总额占比：${data[1]}<br/>最后交易日期：${data[2]}`
            },
            backgroundColor: '#eeeeee',
          },
          legend: {
            orient: 'vertical',
            right: 'right',
            data: legendData,
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data,
            },
          ],
        }

        option && myChart2.setOption(option)
        window.addEventListener('resize', () => {
          myChart2.resize()
        })
      })
    },
    //客户统计
    keHuTongJi() {
      this.loading7 = true
      let index = this.list.findIndex((item) => item.text == '客户统计')
      keHuTongJi({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 3,
      }).then((res) => {
        this.loading7 = false
        this.clientList = res.data.records
        this.list[index].num = res.data.total
      })
    },
    //查看更多客户
    checkMoreClient() {
      this.dialogVisible5 = true
      this.pagination3.page = 1
      keHuTongJi({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.clientMoreList = res.data.records
        this.pagination3.total = Number(res.data.total)
      })
    },
    //查看更多客户分页
    client(val) {
      this.pagination3.page = val
      keHuTongJi({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.clientMoreList = res.data.records
      })
    },
    //进项发票统计
    InBillTongJi() {
      this.loading8 = true
      let index = this.list.findIndex((item) => item.text == '进项发票统计')
      InBillTongJi({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
      }).then((res) => {
        this.loading8 = false
        this.jxfptjList = res.data
        this.list[index].num = res.data.length
      })
    },
    //进项发票税率统计
    InBillTax() {
      this.loading9 = true
      let ind = this.list.findIndex((item) => item.text == '进项发票税率统计')
      InBillTax({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
      }).then((res) => {
        this.list[ind].num = res.data.length
        this.loading9 = false
        this.taxInRateList = []
        let yearList = []
        res.data.map((item) => {
          if (yearList.indexOf(item.year) == -1) {
            yearList.push(item.year)
          }
        })
        yearList.sort((a, b) => {
          let aTimeString = a.replace('.', '/')
          let bTimeString = b.replace('.', '/')
          let aTime = new Date(aTimeString).getTime()
          let bTime = new Date(bTimeString).getTime()
          return bTime - aTime
        })
        for (let i = 0; i < yearList.length; i++) {
          let index = this.taxInRateList.findIndex(
            (tem) => tem.year == yearList[i]
          )
          if (index >= 0) {
            this.taxOptions.forEach((t) => {
              res.data.forEach((ite) => {
                if (ite.ratio == t && ite.year == yearList[i]) {
                  this.taxInRateList[index][t] = ite.sum
                }
              })
            })
          } else {
            this.taxInRateList.push({ year: yearList[i] })
            --i
          }
        }
      })
    },
    //进项发票
    InBill() {
      this.loading11 = true
      let startTime = this.selectYear + '-01-01'
      let endTime = this.selectYear + '-12-31'
      let index = this.list.findIndex((item) => item.text == '进项发票')
      InBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        startTime,
        endTime,
        pageNum: 1,
        pageSize: 3,
      }).then((res) => {
        this.loading11 = false
        this.jxfpList = res.data.records
        this.list[index].num = res.data.total
      })
    },
    //查看更多进项发票
    checkMorejxfp() {
      this.dialogVisible6 = true
      this.pagination4.page = 1
      let startTime = this.selectYear + '-01-01'
      let endTime = this.selectYear + '-12-31'
      this.morejxfp.date = [startTime, endTime]
      InBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        startTime,
        endTime,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.jxfpMoreData = res.data.records
        this.pagination4.total = Number(res.data.total)
      })
    },
    //查看更多进项发票--查询
    searchJxfp() {
      let { date, type, status } = this.morejxfp
      let startTime, endTime
      if (date.length > 0) {
        startTime = date[0]
        endTime = date[1]
      }
      this.pagination4.page = 1
      InBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        pageNum: 1,
        pageSize: 10,
        startTime,
        endTime,
        fplx: type,
        fpzt: status,
      }).then((res) => {
        this.jxfpMoreData = res.data.records
        this.pagination4.total = Number(res.data.total)
      })
    },
    //查看更多进项发票--重置
    resetJxfp() {
      this.morejxfp = {
        date: [],
        type: '',
        status: '',
      }
      this.checkMorejxfp()
    },
    //查看更多进项发票分页
    jxfpChange(val) {
      this.pagination4.page = val
      InBill({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.jxfpMoreData = res.data.records
      })
    },
    //前十大采购商品
    tenPurchaseProd() {
      this.loading12 = true
      let index = this.list.findIndex(
        (item) => item.text == '前十大采购商品统计'
      )
      tenPurchaseProd({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
      }).then((res) => {
        this.loading12 = false
        this.topTenPurchaseProductsList = res.data
        this.list[index].num = res.data.length
      })
    },
    //前十大采购商品统计分析
    checkPurchaseProductsAnalize() {
      this.dialogVisible7 = true
      let legendData = []
      let data = []
      this.topTenPurchaseProductsList.forEach((item) => {
        let seriesData = {}
        legendData.push(item.SPMC)
        seriesData.name = item.SPMC
        seriesData.value = [item.JESUM, item.ratio, item.XHFMC, item.JETOTAL]
        data.push(seriesData)
      })
      this.$nextTick(() => {
        let chartDom = document.getElementById('topTenPurchaseProducts')
        let myChart3 = echarts.init(chartDom)
        let option
        let isTm = this.isTm
        let that = this
        option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              let val = params.data
              let data = val.value
              return `<p style="text-align:center;margin:0;font-weight:900;">${
                val.name
              }</p><hr/>采购金额（元）：${
                isTm ? that.deseHandler(data[0]) : data[0]
              }<br/>占采购总额百分比：${data[1]}<br/>供应商：${
                data[2]
              }<br/>主要供应商销售此商品金额（元）：${
                isTm ? that.deseHandler(data[3]) : data[3]
              }`
            },
            backgroundColor: '#eeeeee',
          },
          legend: {
            orient: 'vertical',
            right: 'right',
            data: legendData,
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data,
            },
          ],
        }

        option && myChart3.setOption(option)
        window.addEventListener('resize', () => {
          myChart3.resize()
        })
      })
    },
    //采购商品统计
    purchaseProdTj() {
      this.loading13 = true
      let index = this.list.findIndex((item) => item.text == '采购商品统计')
      purchaseProdTj({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 3,
      }).then((res) => {
        this.loading13 = false
        this.purchaseProductsList = res.data.records
        this.list[index].num = res.data.total
      })
    },
    //查看更多采购商品
    checkMorePurchaseProducts() {
      this.dialogVisible8 = true
      this.pagination5.page = 1
      purchaseProdTj({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.purchaseProductsMoreList = res.data.records
        this.pagination5.total = Number(res.data.total)
      })
    },
    //查看更多采购商品分页
    purchaseProducts(val) {
      this.pagination5.page = val
      purchaseProdTj({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.purchaseProductsMoreList = res.data.records
      })
    },
    //前十大供应商统计
    tenGys() {
      this.loading14 = true
      let index = this.list.findIndex((item) => item.text == '前十大供应商统计')
      tenGys({ TYSHXYDM: this.comInfo.shtyxydm, year: this.selectYear }).then(
        (res) => {
          this.loading14 = false
          this.topTenSupplierList = res.data
          this.list[index].num = res.data.length
        }
      )
    },
    //前十大供应商统计分析
    checkSupplierAnalize() {
      this.dialogVisible9 = true
      let legendData = []
      let data = []
      this.topTenSupplierList.forEach((item) => {
        let seriesData = {}
        legendData.push(item.XHFMC)
        seriesData.name = item.XHFMC
        seriesData.value = [item.HJJE, item.FPHM, item.ratio, item.KPRQ]
        data.push(seriesData)
      })
      this.$nextTick(() => {
        let chartDom = document.getElementById('topTenSupplier')
        let myChart4 = echarts.init(chartDom)
        let option
        let isTm = this.isTm
        let that = this
        option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              let val = params.data
              let data = val.value
              return `<p style="text-align:center;margin:0;font-weight:900;">${
                val.name
              }</p><hr/>交易总金额（元）：${
                isTm ? that.deseHandler(data[0]) : data[0]
              }<br/>开票份数：${data[1]}<br/>交易总额占比：${
                data[2]
              }<br/>最后交易日期：${data[3]}`
            },
            backgroundColor: '#eeeeee',
          },
          legend: {
            orient: 'vertical',
            right: 'right',
            data: legendData,
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data,
            },
          ],
        }

        option && myChart4.setOption(option)
        window.addEventListener('resize', () => {
          myChart4.resize()
        })
      })
    },
    //供应商
    gysTongJi() {
      this.loading15 = true
      let index = this.list.findIndex((item) => item.text == '供应商统计')
      gysTongJi({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 3,
      }).then((res) => {
        this.loading15 = false
        this.supplierList = res.data.records
        this.list[index].num = res.data.total
      })
    },
    //查看更多供应商
    checkMoreSupplier() {
      this.dialogVisible10 = true
      this.pagination6.page = 1
      gysTongJi({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.supplierMoreList = res.data.records
        this.pagination6.total = Number(res.data.total)
      })
    },
    //查看更多供应商分页
    supplier(val) {
      this.pagination6.page = val
      gysTongJi({
        TYSHXYDM: this.comInfo.shtyxydm,
        year: this.selectYear,
        pageNum: val,
        pageSize: 10,
      }).then((res) => {
        this.supplierMoreList = res.data.records
      })
    },
    //发票分析
    invoiceAnalyse(unit, legendData, XData, data) {
      if (XData.length > 0 && data.length > 0) {
        let chartDom = document.getElementById('invoiceInfo')
        let myChart = echarts.init(chartDom)
        let option
        let isTm = this.isTm
        let that = this
        option = {
          title: {
            text: '单位：' + unit,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
            formatter: function (params) {
              let str = params[0].name + '<br />'
              params.forEach((item) => {
                str += `${item.marker} ${item.seriesName}: ${
                  isTm && unit == '元'
                    ? that.deseHandler(item.value)
                    : item.value
                } <br />`
              })
              return str
            },
          },
          color: ['#73a0fa', '#ed7d31'],
          legend: {
            data: legendData,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: XData,
          },
          yAxis: {
            type: 'value',
          },
          series: data,
        }

        option && myChart.setOption(option, true)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      } else {
        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
        document.getElementById('invoiceInfo').innerHTML = html
        document
          .getElementById('invoiceInfo')
          .removeAttribute('_echarts_instance_')
      }
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    goAssignBlock(el, speed, index) {
      this.activeIndex = index
      let windowH = window.innerHeight //浏览器窗口高度
      let h = this.$refs[el].offsetHeight //模块内容高度

      let t = this.$refs[el].offsetTop //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2 //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop //滚动条距离顶部高度
      let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向下滚动
          currentTop += speed
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向上滚动
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
#invoiceInfo {
  width: 1420px;
  height: 400px;
  margin-top: 10px;
}
#topTenShop,
#topTenClient,
#topTenPurchaseProducts,
#topTenSupplier {
  width: 1200px;
  height: 500px;
}
.containter {
  width: 100%;
  .step {
    ol.titt {
      height: 560px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: fixed;
      top: 300px;
      right: 24px;
      z-index: 999;
    }
    ol.titt .button {
      width: 150px;
      font-size: 14px;
      margin: 0;
    }
    ol.titt .button.cur {
      background-color: #5591f5;
      color: #fff;
    }
  }
  /* .switch {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
  } */
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    //height: 240px;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .basicInfo1 {
    .invoiceInfoSelect {
      height: 56px;
      line-height: 56px;
      text-align: center;

      .button.cur {
        background-color: #e8eeff;
        color: #4767ee;
        border: #5e8bff solid 1px;
      }
    }
  }
  .basicInfo2 {
    .table {
      margin-top: 10px;
      width: 100%;
      height: 172px;
      border-collapse: collapse;
      th,
      td {
        width: 240px;
        height: 56px;
        border: #ccc solid 1px;
      }
      th {
        background-color: #f2f9fe;
      }
      td {
        padding-left: 10px;
        text-align: left;
      }
    }
  }
}
.morexxfp {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  div {
    margin-right: 24px;
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.glqy {
  color: #4a8bf6;
  margin-left: 24px;
}
.glqy:hover {
  cursor: pointer;
}
.item {
  margin-top: 8px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 10px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 50px);
  max-width: calc(100% - 30px);
}
/* .el-dialog .el-dialog__body {
     flex:1;
     overflow: auto;
} */
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>